<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="会员卡号" prop="cardNumber">
                <el-input
                  class="w-200"
                  v-model="queryParams.cardNumber"
                  placeholder="请输入会员卡号"
                  @keyup.enter.native="handleQuery"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="计算状态" prop="crossStatus">
                <el-select
                  v-model="queryParams.crossStatus"
                  placeholder="请选择"
                  class="w-200"
                >
                  <el-option
                    v-for="item in crossStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  filterable
                  @change="handleQuery"
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="balance">
      <div>总余额:{{ CardTotalInfo.balance }}</div>
      <div>本金:{{ CardTotalInfo.principal }}</div>
      <div>赠金:{{ CardTotalInfo.giveMoney }}</div>
      <div>额外赠金:{{ CardTotalInfo.extraMoney }}</div>
    </div>

    <!-- 会员卡列表 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">会员卡列表</div>
        <!-- v-hasPermi="['customer:card:exl']" -->
        <div class="op_right">
          <el-button
            @click="handleExport"
            :loading="exportLoading"
            class="repeat"
            >导出</el-button
          >
        </div>
      </div>

      <div class="table_list">
        <el-table :data="MemberCardLists" stripe style="width: 100%">
          <!-- <el-table-column
            prop="cardName"
            label="会员卡名称"
            width="150px"
          ></el-table-column> -->
          <el-table-column
            prop="cardNumber"
            label="会员卡号"
            width="150px"
          ></el-table-column>
          <el-table-column prop="stateStr" label="会员卡状态">
          </el-table-column>
          <el-table-column prop="balance" label="余额"> </el-table-column>
          <el-table-column prop="principal" label="本金"> </el-table-column>
          <el-table-column prop="giveMoney" label="赠金"> </el-table-column>
          <el-table-column prop="extraMoney" label="额外赠金">
          </el-table-column>
          <el-table-column prop="accruingTopUp" label="累计充值">
          </el-table-column>
          <el-table-column prop="accruingGiveMoney" label="累计赠金">
          </el-table-column>
          <el-table-column
            prop="accruingExtraMoney"
            label="累计额外赠金"
            width="130px"
          ></el-table-column>
          <el-table-column
            prop="accruingConsume"
            label="累计消费"
          ></el-table-column>
          <el-table-column
            prop="cardSplitMoney"
            label="老余额"
          ></el-table-column>
          <el-table-column prop="firstTopUpTime" label="开卡时间" width="150px">
          </el-table-column>

          <el-table-column prop="date" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.crossStatus === 'Y' ? true : false"
                @click="Takedown(scope.row, 'Y')"
                >计算</el-button
              >

              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.crossStatus === 'N' ? true : false"
                @click="Takedown(scope.row, 'N')"
                v-hasPermi="['customer:card:hide']"
                >不计算</el-button
              >
              <el-button
                size="mini"
                v-if="scope.row.hideStatus === 'N'"
                type="text"
                @click="close(scope.row, '显示')"
                v-hasPermi="['customer:card:hide']"
                >显示</el-button
              >

              <el-button
                size="mini"
                type="text"
                v-if="scope.row.hideStatus === 'Y'"
                @click="close(scope.row, '隐藏')"
                >隐藏</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  MemberCardList,
  customerCardCross,
  hideMemberCard,
  ExcelCustmerCard,
  getCardTotal,
} from "@/api/business/client";

export default {
  name: "EryuoaStoreFrontendtabList",

  data() {
    return {
      exportLoading: false,
      loading: false,
      activeIndex: 1,
      currentIndex: 1,
      MemberCardLists: [], // 项目列表数据
      StoreSlist: [], // 门店列表数据
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        cardNumber: "",
        crossStatus: "",
        storeId: "",
      },
      total: 0,
      textarea: "",
      value1: "",

      crossStatusList: [
        {
          value: "Y",
          label: "计算",
        },
        {
          value: "N",
          label: "不计算",
        },
      ],

      // 销售状态
      saleStatusObj: {
        0: "上架",
        1: "下架",
      },

      ProjrctOptions: [
        {
          value: "0",
          label: "上架",
        },
        {
          value: "1",
          label: "下架",
        },
      ],

      storesList: [], // 应用门店
      storesLoading: false,
      CardTotalInfo: {},
    };
  },

  created() {
    this.getList();
    this.getCardTotalData();
  },

  mounted() {},

  methods: {
    getCardTotalData() {
      getCardTotal(this.queryParams)
        .then((Res) => {
          const { code, data } = Res;
          if (code === 0) {
            this.CardTotalInfo = data;
          }
        })
        .catch((err) => {});
    },
    handleExport() {
      this.$modal
        .confirm("是否确认导出会员卡列表数据?")
        .then(() => {
          this.exportLoading = true;
          return ExcelCustmerCard(this.queryParams);
        })
        .then((response) => {
          this.$download.excel(response, "会员卡列表");
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },
    close(row, hideStatus) {
      this.$confirm("确认要" + hideStatus + "该会员卡吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          hideMemberCard({ cardId: row.id }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    // 取消 查看门店
    CancleCheckStore() {
      this.CheckStoresdialogVisible = false;
      this.storesLoading = false;
      this.storesList = [];
    },

    // 确认 查看门店
    CheckStore() {
      this.CheckStoresdialogVisible = false;
      this.storesLoading = false;
      this.storesList = [];
    },

    getList() {
      this.loading = true;
      MemberCardList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.MemberCardLists = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getCardTotalData();
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 操作 计算 不计算
    Takedown(row, status) {
      this.$confirm(
        "是否" + (status === "Y" ? "计算" : "不计算") + "?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.editStatus(row, status);
        })
        .catch(() => {});
    },
    editStatus(row, status) {
      this.loading = true;

      customerCardCross({
        id: row.id,
      })
        .then((response) => {
          this.loading = false;
          const { code } = response;
          if (code === 0) {
            this.getList();
            this.$message({
              message: "操作成功",
              type: "success",
            });
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 200px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}

.balance {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  margin-left: 24px;
  font-size: 17px;
  display: flex;
  div {
    padding: 0px 24px;
    font-weight: bold;
  }
}
</style>
